@import "@blueprintjs/core/lib/scss/variables";

$intent-primary-text: $blue1;
$intent-success-text: $green1;
$intent-warning-text: $orange1;
$intent-danger-text: $red1;

$dark-intent-primary-text: $blue5;
$dark-intent-success-text: $green5;
$dark-intent-warning-text: $orange5;
$dark-intent-danger-text: $red5;

.examples-root {
  align-items: center;
  display: flex;
  flex-direction: row;
}

.examples-container {
  background-color: $light-gray2;
  display: flex;
  flex-direction: column;
  padding: $pt-spacing * 2;
  width: 100%;

  &.#{$ns}-dark {
    background-color: $pt-dark-app-background-color;
  }
}

.example-row {
  display: flex;
  justify-content: space-evenly;

  > :not(:last-child) {
    margin-right: $pt-spacing * 2;
  }
}

.example-card-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: $pt-spacing * 7.5;
}

.example-card {
  background-color: $light-gray4;
}

.tag-container {
  display: flex;
  flex-direction: column;

  > :not(:last-child) {
    margin-bottom: $pt-spacing * 2;
  }
}

.tag-input-container {
  display: flex;
  flex-direction: column;

  > :not(:last-child) {
    margin-bottom: $pt-spacing * 2;
  }
}

.html-table-example {
  .#{$ns}-intent-primary {
    color: $intent-primary-text;
  }
  .#{$ns}-intent-success {
    color: $intent-success-text;
  }
  .#{$ns}-intent-warning {
    color: $intent-warning-text;
  }
  .#{$ns}-intent-danger {
    color: $intent-danger-text;
  }

  .#{$ns}-dark & {
    .#{$ns}-intent-primary {
      color: $dark-intent-primary-text;
    }
    .#{$ns}-intent-success {
      color: $dark-intent-success-text;
    }
    .#{$ns}-intent-warning {
      color: $dark-intent-warning-text;
    }
    .#{$ns}-intent-danger {
      color: $dark-intent-danger-text;
    }
  }
}

.text-example {
  &.#{$ns}-intent-primary {
    color: $intent-primary-text;
  }
  &.#{$ns}-intent-success {
    color: $intent-success-text;
  }
  &.#{$ns}-intent-warning {
    color: $intent-warning-text;
  }
  &.#{$ns}-intent-danger {
    color: $intent-danger-text;
  }

  .#{$ns}-dark & {
    &.#{$ns}-intent-primary {
      color: $dark-intent-primary-text;
    }
    &.#{$ns}-intent-success {
      color: $dark-intent-success-text;
    }
    &.#{$ns}-intent-warning {
      color: $dark-intent-warning-text;
    }
    &.#{$ns}-intent-danger {
      color: $dark-intent-danger-text;
    }
  }
}

.#{$ns}-toast {
  margin: ($pt-spacing * 2) 0;
}

.box-example {
  background-color: $gray1;
  color: $white;
}
